<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		
		<link type="text/css" rel="stylesheet" href="css/form.css" />
		
		
		<title>HTML5 pattern and required Attribute Test</title>
		
		
		<!-- Needed for Validation --> 
		<script type="text/javascript" src="../../shared/js/weston.ruter.net/webforms2/webforms2_src.js">
		</script>
		
	</head>
	<body id="myExample">
		<div id="exampleBlurb">
		<p>
				This is an example of a HTML5 form using  
				<code>required</code> and <code>validate</code> attributes.  
				
					<a href="http://www.useragentman.com/blog/?p=1110">Back to User Agent Man HTML5 Forms article </a>
			</p>
		</div>
		
		<fieldset>
			<legend>Personal Information</legend>
		
		<p>Thank you for giving to the Zoltan Hawryluk Entertainment Fund.  Your
		contribution will ensure that Webmasters in Need will be able to buy
		beer when they would otherwise do without.</p>
		
		<p>Form fields labelled <img src="images/asterix.gif" alt="*"/> are mandatory</p>
		<form>
			<table class="formTable">
				<tr>
					<th>Full Name: </th>
					<td><input type="text" name="fullName" value="" required="required"  />
					<div class="description"><strong>Required.</strong> If you would like to give anonymously,
					tough.  We find people are more generous when their Good
					Name is on the line.</div>
					</td>
				</tr>
				
				<tr>
					<th>Company Name: </th>
					<td><input type="text" name="companyName" value=""  />
					<div class="description">If you are unemployed, please leave 
					blank.</div>
					</td>
				</tr>
				
				<tr>
					<th>Zip Code</th>
					<td><input type="text" name="postalCode" value="" required="required" 
						pattern="(\d{5}([\-]\d{4})?)"
					/>
					<div class="description">Please enter a valid American postal code. 
					Valid format is <strong>nnnnn</strong> or <strong>nnnnn-nnnn</strong>
					where <strong>n</strong>
					is a numeric digit.</div>
					
					</td>
				</tr>
				<tr>
					<td></td>
					<td><input type="submit" value="Next &gt;"/></td>
				</tr>
			</table>
			</fieldset>
		</form>
		
	</body>
</html>
